<template>
  <div class="wrapper flex-h flex-hc">
    <div class="flex-h flex-hsb flex-vc content-wrapper">
      <span>网络异常，请检查网络或更改系统设置</span>
      <i class="icon iconfont icon-cancel" @click="hide"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    hide() {
      this.show = false
    }
  }
}
</script>

<style scoped>
  .wrapper {
    width: 10rem;
  }

  .content-wrapper {
    height: 60px;
    background: #FECD07;
    border-radius: 32px;
    padding: 0px 20px;
  }

  .wrapper > span:first-of-type {
    color: #000000;
    font-size: 14px;
    line-height: 20px;
  }

  .wrapper > i:first-of-type {
    color: #000;
    font-size: 14px;
    margin-left: 20px;
  }
</style>
